<template>
  <div class="dashboard-container">
    <div class="dashboard-text">name: {{ name }}</div>
    <UploadExcel
      :on-success="handelSuccess"
    />
  </div>
</template>

<script>

import { mapGetters } from 'vuex'
import { sendAdd } from '@/api/employees'
import { formatExcelDate } from '@/utils/index.js'
export default {
  name: 'Dashboard',
  data() {
    return {
      tableData: []
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  methods: {
    doAdd() {
      this.tableData.forEach(async item => {
        await sendAdd(item)
      })
    },
    transExcel(results) {
      const mapInfo = {
        '入职日期': 'timeOfEntry',
        '手机号': 'mobile',
        '姓名': 'username',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName',
        '聘用形式': 'formOfEmployment'
      }
      const res = results.map(item => {
        // 取出表格里面中文的对象属性名
        const zhKey = Object.keys(item)
        const obj = {}
        zhKey.forEach(ele => {
          // 取出中文对象属性名，和英文属性名一样，再取出英文属性值
          const enKey = mapInfo[ele]
          console.log(formatExcelDate(ele))
          if (enKey === 'timeOfEntry' || enKey === 'correctionTime') {
            obj[enKey] = item[formatExcelDate(ele)]
            debugger
          } else {
            obj[enKey] = item[ele]
          }
        })
        return obj
      })
      return res
    },

    handelSuccess({ results, header }) {
      const res = this.transExcel(results)
      this.tableData = res
      this.doAdd()
    }
  }
}

</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
